<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <title>Document</title>
    <style>
      .primary {
        /* box-shadow: 0px 1px 1px #333333; */
      }
      .flex {
        flex-wrap: wrap;
      }
    </style>
</head>
<body>
  <div class="main">
    <div class="flex">
      <div class="pa-5 red-l3 text-white">258</div>
      <div class="pa-5 red-l2  text-amber">258</div>
      <div class="pa-5 red-l1 text-blue">258</div>
      <div class="pa-5 red">258</div>
      <div class="pa-5 red-d1">258</div>
      <div class="pa-5 red-d2">258</div>
      <div class="pa-5 red-d3">258</div>
    </div>
    <div class="flex">
      <div class="pa-5 blue-l3">258</div>
      <div class="pa-5 blue-l2">258</div>
      <div class="pa-5 blue-l1">258</div>
      <div class="pa-5 blue">258</div>
      <div class="pa-5 blue-d1">258</div>
      <div class="pa-5 blue-d2">258</div>
      <div class="pa-5 blue-d3">258</div>
    </div>
    <div class="flex">
      <div class="pa-5 cyan-l3">258</div>
      <div class="pa-5 cyan-l2">258</div>
      <div class="pa-5 cyan-l1">258</div>
      <div class="pa-5 cyan">258</div>
      <div class="pa-5 cyan-d1">258</div>
      <div class="pa-5 cyan-d2">258</div>
      <div class="pa-5 cyan-d3">258</div>
    </div>
    <div class="flex">
      <div class="pa-5 amber-l3">258</div>
      <div class="pa-5 amber-l2">258</div>
      <div class="pa-5 amber-l1">258</div>
      <div class="pa-5 amber">258</div>
      <div class="pa-5 amber-d1">258</div>
      <div class="pa-5 amber-d2">258</div>
      <div class="pa-5 amber-d3">258</div>
    </div>
    <div class="flex">
      <div class="pa-5 indigo-l3">258</div>
      <div class="pa-5 indigo-l2">258</div>
      <div class="pa-5 indigo-l1">258</div>
      <div class="pa-5 indigo">258</div>
      <div class="pa-5 indigo-d1">258</div>
      <div class="pa-5 indigo-d2">258</div>
      <div class="pa-5 indigo-d3">258</div>
    </div>
  </div>
  <div class="show-sm">
    <div class="flex mt-5">
      <div class="pa-5 primary ma-1">258</div>
      <div class="pa-5 primary-plain ma-1">258</div>
      <div class="pa-5 warning ma-1">258</div>
      <div class="pa-5 warning-plain ma-1">258</div>
      <div class="pa-5 info ma-1">258</div>
      <div class="pa-5 info-plain ma-1">258</div>
      <div class="pa-5 danger ma-1">258</div>
      <div class="pa-5 danger-plain ma-1">258</div>
      <div class="pa-5 success ma-1">258</div>
      <div class="pa-5 success-plain ma-1">258</div>
    </div>
  </div>
</body>
</html>